<template>
  <div class="acticle">
    <div>{{acticle.title}}</div>
    <div>
      <span v-for="(t,index) in acticle.tags" :key="index">{{t}}</span>
    </div>
    <div>{{acticle.author.nickName}}</div>
    <div>{{handleTime(acticle.created_at)}}</div>
  </div>
</template>
<script>
import marked from "marked";
import moment from "moment";
export default {
  scrollToTop: true,
  transition: "fade",
  props: ["acticle"],
  data() {
    return {};
  },
  methods: {
    compileMarkdown(txt) {
      return marked(txt, { sanitize: true });
    },
    handleTime(time, type = 'YYYY-MM-DD HH:mm:ss') {
      return moment(time).format(type)
    }
  }
};
</script>


<style lang="scss" scoped>
.acticle {
  width: 90%;
  // height: 8rem;
  background: #f0f0f0;
  padding: 0.6rem 0.8rem;
  margin: 0 auto 1rem;
  border-radius: 5px;
  box-shadow: 4px 2px #f0f0f0 outset;
}
</style>